<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>时间轴折线图</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 影音分析系统 <span
        class="c-gray en">&gt;</span> 饼状图 <a class="btn btn-success radius r"
                                                style="line-height:1.6em;margin-top:3px"
                                                href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="f-14 c-error">特别声明：ApacheEchart 是一个基于 JavaScript 的开源可视化图表库，仅免费提供给个人学习、个人网站，如果在商业项目中使用，请去Apache
        Echart官网网站购买商业授权。或者您也可以选择其他免费的第三方图表插件，例如HighChart。华清远见不承担任何版权问题。
    </div>

    <div><br>
        <hr>
        <br></div>
    <div id="container" class="cur" style="min-width:960px;height:400px"></div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>

<!--以下导入前端组件库-->
<!--
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"
        type="application/javascript"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"
        type="application/javascript"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0/echarts.min.js"
        type="application/javascript"></script>
-->

<!--引入公共的组件库，减少屎山代码-->
<script src="js/commons/commonlibs.js"></script>
<script src="js/auth/auth.js"></script>

<script type="module">

    let flag = await checkCurrentUserLoginStatus();
    flag = JSON.parse(flag);

    if(!flag){ //表示当前用户没有登录
        window.location.href = 'login.html';
    }

    let myChart = echarts.init(document.getElementById('container'));

    // 数据数组，name 为数据项名称，value 为数据项值json
    let data = [
        /*
        {

            "name": "Music",
            "value": 179049

        }, {
            "name": "Entertainment",
            "value": 127674
        }, {
            "name": "Comedy",
            "value": 87818
        }, {
            "name": "Film",
            "value": 73293
        }, {
            "name": "Animation",
            "value": 73293
        }, {
            "name": "Sports",
            "value": 67329
        }, {
            "name": "Gadgets",
            "value": 59817
        }, {
            "name": "Games",
            "value": 59817
        }, {
            "name": "Blogs",
            "value": 48890
        }, {
            "name": "People",
            "value": 48890
        }*/
    ];


    //准备设置的内容
    let option = {
        // 提示信息
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        // legend就是Echarts图表中对图形的解释部分
        legend: {
            //设置图例的朝向  垂直显示；horizontal // 水平显示
            orient: 'vertical',
            left: 'left',
            //设置文本样式为黑色
            textStyle: {color: 'balck'}
        },

        //当用户点击相关文字时，浏览器就会自动将焦点转移到该标签相关的表单控件上
        label: {
            normal: {
                //文字改变样式
                textStyle: {
                    color: 'red'  // 改变标示文字的颜色
                }
            }
        },

        //饼状图
        series: [
            {
                name: '谷粒影音视频分类统计分析',
                type: 'pie',// 设置图表类型为饼图
                radius: '60%',// 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                center: ['50%', '60%'],// 数据数组，name 为数据项名称，value 为数据项值
                data: data,

                //设置饼状图扇形区域样式
                itemStyle: {
                    //设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                    emphasis: {
                        //  阴影渐变范围控制
                        shadowBlur: 10,
                        //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ],
        color: ["#ae5039", "#65c294", "#d9d6c3", "#339933", "#FF6666", "#9999FF", "#FFFF00", "#FF9933", "#FFDEAD", "#FF00FF"]
    };
    //准备Echarts代码  setOption设置当前对象的属性
    myChart.setOption(option);

    window.onload = queryTopTenCatalogInfoList();

    function queryTopTenCatalogInfoList() {
        queryTopTenCatalogList().then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {
                //200表示请求成功
                //option.series[0].data = resp.data.data;
                for(let i=0;i<resp.data.data.length;i++){
                    let obj = resp.data.data[i]; //生成一个临时对象
                    let tempObj = {
                        name : obj.categoryName,
                        value : obj.categoryCount
                    }
                    option.series[0].data.push(tempObj);
                }
                //动态刷新；
                setTimeout(() => {
                    //myChart.setOption(option, true);
                    myChart.setOption(option, {replaceMerge: ['series']}, true)
                    myChart.hideLoading();
                }, 1000)
            }
        })
    }

</script>
</body>
</html>